<template>
	<view class="slideshowMain">
		<view class="slideshow_area">
			<swiper interval="3000" style="height: 600rpx;" indicator-active-color="#157658" autoplay circular>
				<block wx:key="key" v-for="(item,index) in slideshowImgInfos">
					<swiper-item style="width:100%;height: 600rpx;">
						<image style="width:100%; height: 100%;" :src="$baseUrl+'/source/'+item.img_path"></image>
					</swiper-item>
				</block>
			</swiper>
		</view>
	</view>
	<!--
					swiper常用属性介绍：
						indicator-dots:轮播图正前方的小圆点(此案例没有使用官方提供的，是自定义的在右下角附近)
						autoplay：是否自动切换
						interval：图片轮播间隔此处为3秒
						duration：图片轮播动画时长 此处为0.5秒
						circular：是否开启无缝轮播（此处为到第三张图片后无缝播放第一张图片）
				 -->
	<!-- 	<view class="slideshowMain">
		<view class="slideshow_area">
			<swiperDot class="position-relative" :current="current" :info="swipers">

				<swiper :autoplay="true" :interval="3000" :duration="500"
				 circular style="height: 250rpx; "
					@change="changeIndicatorDots">
					<swiper-item style="display: flex; justify-content: center;" v-for="(item,index) in slideshowImgInfos" :key="index">
						<image :src="item.src" mode="sapectFill" style="height:100%" class="rounded-lg">
						</image>	
					</swiper-item>
				</swiper>
			</swiperDot>
		</view>
	</view> -->
</template>


<script>
	// import swiperDot from "@/pages/slideshow/swiper-doc/swiper-doc.vue";
	// import bannerJsonData from "@/pages/";
	import {
		selectCustomCondition
	} from '@/api/publicApi.js'
	import request from "@/api/request.js"
	export default {
		props: {

		},

		components: {
			// swiperDot
		},
		data() {
			return {
				// slideshowImgInfos: [{
				// 	// src: 'https://cdn.pixabay.com/photo/2023/10/15/15/29/pumpkins-8317227_1280.jpg',
				// 	src: "http://localhost:8000/api/source/jpeg/2024030416243799521195.jpeg",
				// 	title: '自定义轮播图组件图片一'
				// }, {
				// 	// src: 'https://cdn.pixabay.com/photo/2023/10/21/14/46/leaves-8331562_640.jpg',
				// 	src: "D:/cj/code/qianduan/uni-app/projectA/static/slideshow/2.jpeg",
				// 	title: '自定义轮播图组件图片二名字很长测试用'
				// }, {
				// 	// src: 'https://cdn.pixabay.com/photo/2023/10/21/18/34/grapes-8331973_640.jpg',
				// 	src: "D:/cj/code/qianduan/uni-app/projectA/static/slideshow/3.jpeg",
				// 	title: '自定义轮播图组件图片三'
				// }],
				slideshowImgInfos:[]
			}
		},
		methods: {
			// changeIndicatorDots方法会在轮播的图片切换后调用，e.detail.current表示当前所在滑块的 index
			changeIndicatorDots(e) {
				this.current = e.detail.current
			},
			getSysSlideshow() {
				let dataPar ={}
				request('/wx/getSysSlideshow', dataPar).then((res) => {
					//设置数据
					console.log('初始化', res)
					this.slideshowImgInfos = res.data;
				}).catch((error) => {
					this.$message.error("操作失败")
				})
			}
		},
		// created() {
			// console.log('轮播图created',baseUrl);
		// },
		mounted() {
			console.log('轮播图mounted',this.$baseUrl);
			this.getSysSlideshow()
		
		}
	}
</script>

<style lang="less" scoped>
	@import"@/css/publicCssUtil.css";

	.slideshowMain {
		margin-top: 60px;
	}

	// /* 轮播图展示 */
	// .slideshow_area {}

	// .position-relative {}
</style>